<template>
  <a-card :bordered="false" style="padding-top: 24px;width: 100%;border-radius: 4px">
    <a-form layout="inline" @submit="handleSearch">
      <div class="search">
        <div class="searchForm">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-item :label="`批次编号`">
                <a-input placeholder="请输入优惠券批次编号" v-model="queryForm.couponNo" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`优惠券名称`">
                <a-input placeholder="请输入优惠券名称" v-model="queryForm.couponName" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`优惠券类型`">
                <a-select v-model="queryForm.couponType" placeholder="请选择优惠券类型" :style="{width:'200px'}">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    店铺折扣券
                  </a-select-option>
                  <a-select-option value="02">
                    商品折扣券
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`有效时间`">
                <a-range-picker v-model="queryForm.useTimeArray" :style="{width:'200px'}"/>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`状态`">
                <a-select v-model="queryForm.status" placeholder="请选择优惠券状态" :style="{width:'200px'}">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    正常
                  </a-select-option>
                  <a-select-option value="02">
                    过期
                  </a-select-option>
                  <a-select-option value="03">
                    禁用
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :span="8">
              <a-form-item :label="`推广渠道`">
                <a-select v-model="queryForm.couponChannel" placeholder="请选择推广渠道" :style="{width:'200px'}">
                  <a-select-option value="">
                    全部
                  </a-select-option>
                  <a-select-option value="01">
                    全店铺推广
                  </a-select-option>
                  <a-select-option value="02">
                    自有渠道推广
                  </a-select-option>
                  <a-select-option value="03">
                    店铺新客
                  </a-select-option>
                  <a-select-option value="04">
                    联盟达人定向券
                  </a-select-option>
                  <a-select-option value="05">
                    单品广告推广券
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

          </a-row>
        </div>
        <div class="searchBtn">
          <a-button :style="{marginTop:'10px'}" type="primary" @click="handleSearch">
            查询
          </a-button>
          <br/>
          <a-button :style="{marginTop:'10px'}" @click="handleReset">
            重置
          </a-button>
        </div>
        <div class="tableTool">
          <a-button type="primary" @click="addCouponModalVisible = !addCouponModalVisible">
            新建批次券
          </a-button>
        </div>
      </div>
    </a-form>

    <a-table
      :rowKey="`couponNo`"
      :columns="columns"
      :data-source="data"
      :style="{marginTop:'15px',float:'left',width:'100%'}"
      :pagination="{ pageSize: 10 }"
      size="small"
      @change="tableChange">
      <template slot="couponType" slot-scope="text,record">
        <span v-if="record.couponType == '01'">
          店铺折扣券
        </span>
        <span v-if="record.couponType == '02'">
          商品折扣券
        </span>
      </template>
      <template slot="couponChannel" slot-scope="text,record">
        <span v-if="record.couponChannel == '01'">
          全店铺推广
        </span>
        <span v-if="record.couponChannel == '02'">
          自有渠道推广
        </span>
        <span v-if="record.couponChannel == '03'">
          店铺新客
        </span>
        <span v-if="record.couponChannel == '04'">
          联盟达人定向券
        </span>
        <span v-if="record.couponChannel == '05'">
          单品广告推广券
        </span>
      </template>
      <template slot="couponDiscount" slot-scope="text,record">
        <span>
          {{ record.couponDiscount }}折
        </span>
      </template>
      <template slot="status" slot-scope="text,record">
        <span v-if="record.status == '01'">
          正常
        </span>
        <span v-if="record.status == '02'">
          过期
        </span>
        <span v-if="record.status == '03'">
          禁用
        </span>
      </template>
      <template slot="countInfo" slot-scope="text,record">
        <span>
          {{ record.couponCount }} / {{ record.couponCount - record.getCount }}
        </span>
      </template>
      <template slot="action" slot-scope="text,record,index">
        <span>
          <a v-if="record.status == '01'" @click="handleDisable(record,index)">禁用</a>
          <a v-if="record.status == '03'" @click="handleEnable(record,index)">正常</a>
        </span>
      </template>
    </a-table>

    <a-modal
      title="新增优惠券"
      :visible="addCouponModalVisible"
      :width="600"
      :closable="false"
      @cancel="addCouponModalVisible = !addCouponModalVisible"
      @ok="handleAddCoupon">
      <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="优惠券名称">
          <a-input v-model="addForm.couponName" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入优惠券名称"/>
        </a-form-item>
        <a-form-item label="类型">
          <a-select v-model="addForm.couponType" placeholder="请选择优惠券类型" :style="{width:'350px'}">
            <a-select-option value="01">
              店铺折扣券
            </a-select-option>
            <a-select-option value="02">
              商品折扣券
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="推广渠道">
          <a-select v-model="addForm.couponChannel" placeholder="请选择推广渠道" :style="{width:'350px'}">
            <a-select-option value="01">
              全店铺推广
            </a-select-option>
            <a-select-option value="02">
              自有渠道推广
            </a-select-option>
            <a-select-option value="03">
              店铺新客
            </a-select-option>
            <a-select-option value="04">
              联盟达人定向券
            </a-select-option>
            <a-select-option value="05">
              单品广告推广券
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="折扣">
          <a-input v-model="addForm.couponDiscount" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入折扣"/> 折
        </a-form-item>
        <a-form-item label="领取限期">
          <a-range-picker v-model="addForm.getTimeArray" :style="{width:'350px',borderRadius:'4px'}" :placeholder="['开始时间', '结束时间']"/>
        </a-form-item>
        <a-form-item label="使用时间">
          <a-select v-model="addForm.useDateType" placeholder="请选择使用时间" :style="{width:'350px'}">
            <a-select-option value="01">
              限制日期范围
            </a-select-option>
            <a-select-option value="02">
              限制天数
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="日期范围">
          <a-range-picker v-model="addForm.useTimeArray" :style="{width:'350px',borderRadius:'4px'}" :placeholder="['开始时间', '结束时间']"/>
        </a-form-item>
        <a-form-item label="发放量">
          <a-input v-model="addForm.couponCount" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入发放量"/> 张
        </a-form-item>
        <a-form-item label="每人限领">
          <a-input v-model="addForm.limitCount" :style="{width:'350px',borderRadius:'4px'}" placeholder="请输入每人限领"/> 张
        </a-form-item>
        <a-form-item label="领券后跳转">
          <a-select v-model="addForm.couponRedirect" placeholder="请选择领券后跳转" :style="{width:'350px'}">
            <a-select-option value="01">
              店铺首页
            </a-select-option>
            <a-select-option value="02">
              商品详细页
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
  import { queryCoupon, addCoupon, updateCoupon } from '@/api/coupon'
  import Template from '@/views/tmall/express/template'

  const columns = [
    {
      title: '优惠券批次号',
      dataIndex: 'couponNo',
      key: 'couponNo'
    },
    {
      title: '优惠券名称',
      dataIndex: 'couponName',
      key: 'couponName'
    },
    {
      title: '优惠券类型',
      key: 'couponType',
      scopedSlots: { customRender: 'couponType' }
    },
    {
      title: '推广渠道',
      key: 'couponChannel',
      scopedSlots: { customRender: 'couponChannel' }
    },
    {
      title: '优惠券价值',
      key: 'couponDiscount',
      scopedSlots: { customRender: 'couponDiscount' }
    },
    {
      title: '有效时间',
      key: 'useEndTime',
      dataIndex: 'useEndTime'
    },
    {
      title: '发放时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '发放量/剩余量',
      key: 'countInfo',
      scopedSlots: { customRender: 'countInfo' }
    },
    {
      title: '状态',
      key: 'status',
      scopedSlots: { customRender: 'status' }
    },
    {
      title: '已使用',
      key: 'usedCount',
      dataIndex: 'usedCount'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  const data = []

  export default {
    name: 'ShopCoupon',
    components: { Template },
    data () {
      return {
        queryForm: {
          couponNo: '',
          couponName: '',
          couponType: '',
          useTimeArray: [],
          status: '',
          couponChannel: ''
        },
        columns: columns,
        data: data,
        total: 0,
        pageNumb: 1,
        pageSize: 10,

        addCouponModalVisible: false,
        addForm: {
          couponName: '',
          couponType: '',
          couponDiscount: '',
          getStartTime: '',
          getEndTime: '',
          useDateType: '',
          useStartTime: '',
          useEndTime: '',
          couponCount: '',
          limitCount: '',
          couponRedirect: '',
          couponChannel: '',
          getTimeArray: [],
          useTimeArray: []
        }
      }
    },
    methods: {
      handleSearch () {
        this.queryForm.pageNumb = 1
        this.queryForm.pageSize = 10
        queryCoupon(this.queryForm).then(rsp => {
          this.pageNumb = rsp.pageNumb
          this.pageSize = rsp.pageSize
          this.total = rsp.total
          this.data = rsp.data
        })
      },
      handleReset () {
        this.queryForm = {}
      },
      handleDisable (record, index) {
        updateCoupon({ couponNo: record.couponNo, status: '03' }).then(rsp => {
          this.data.splice(index, 1, rsp)
        })
      },
      handleEnable (record, index) {
        updateCoupon({ couponNo: record.couponNo, status: '01' }).then(rsp => {
          this.data.splice(index, 1, rsp)
        })
      },
      handleAddCoupon () {
        addCoupon(this.addForm).then(rsp => {
          this.data.splice(this.data.length, 0, rsp)
          this.addForm = {}
          this.addCouponModalVisible = !this.addCouponModalVisible
        })
      }
    },
    mounted () {
      this.queryForm.pageNumb = this.pageNumb
      this.queryForm.pageSize = this.pageSize
      queryCoupon(this.queryForm).then(rsp => {
        this.pageNumb = rsp.pageNumb
        this.pageSize = rsp.pageSize
        this.total = rsp.total
        this.data = rsp.data
      })
    }
  }
</script>

<style>
  .search {
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
    height: 90px;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    height: 90px;
    padding-left: 20px;
  }

  .tableTool {
    float: right;
    padding-top: 15px;
  }

  .ant-form-item-label {
    width: 100px !important;
  }
</style>
